<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="店铺名称：">
          <el-input
            v-model="formInline.shopName"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="商户账户名称：">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="商户账户名称：">
          <el-input
            v-model="formInline.accountName"
            placeholder="请输入商户账户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="汇入/汇出：">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付服务商：">
          <el-select v-model="formInline.payType" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            :clearable="false"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="管辖区域：">
          <el-select v-model="formInline.areaId" placeholder="请选择">
            <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="result_box">
        查询结果：商家 {{funodAound}} 家
        <export-excel-button
          title="资金汇入汇出列表"
          action="/platform/fund/log/export"
          :params="ExportParams"
        />
      </div>
       
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
     
      </ex-table>
    </div>
  </div>
</template>
<script>
// components
import { fundLog,funaccountCount,adminDict } from "@/api/moneyManagement";
import { userAreaSelect } from "@/api/common";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import handlePageMixin from "@/mixins/handlePageMixin";
import { Option } from "element-ui";
export default {
  name: "billList",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      formInline: {
        areaId:'',//区域id
        accountName: "", //相关账号-商户名称用户昵称
        shopName: "", //店铺名称
        type: "", //类型 1 汇入 2 汇出
        payType:"",//支付服务商
        startTime: "", //支付开始时间
        endTime: "", //支付结束
      },
      areaSelect: [], //区域下拉
      date: [],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "汇入",
        },
        {
          value: "2",
          label: "汇出",
        },
      ],
      options3:[], //支付服务商
      tableData: [],
      funodAound:'',//查询结果：商家数量
      tableColumn: [
        { prop: "areaName",label: "管辖区域", width: 130 },
        { prop: "time", label: "时间" },
        { prop: "accountName", label: "商户账号名称" },
        { prop: "shopName", label: "店铺名称" },
        { prop: "payTypeDict", label: "支付服务商" },
        { prop: "typeDict", label: "汇入/汇出" },
        { prop: "money", label: "金额（¥）", width: 120 },
        { prop: "remark", label: "备注", width: 120 },
      ],
    };
  },
  computed: {
    ExportParams() {
      const { id: ticketId } = this;
      const params = {
        ...this.pageOptions,
        ...this.formInline,
        startTime: this.date[0],
        endTime: this.date[1],
      };
      return params;
    },
  },
  mounted() {
    this.formInline.type=this.options[0].value
    this.getlinkagelist();
    this.getList();
    this.geAcound()
    this.getUserAreaSelect();
  },
  methods: {
  getUserAreaSelect() {
      //查询用户区域下拉框
      userAreaSelect().then((res) => {
        var arr = [{
          id: "",
          value: "全部",
        }, ];
        this.areaSelect = arr.concat(res.result);
      });
    },
    getlinkagelist() {
      //支付服务商
        const params = {
          dictType: "merchant_fund_account_type",
        };
        adminDict(params).then((res) => {
          var arr = [
            {
              id: "",
              value: "全部",
            },
          ];
          this.options3 = arr.concat(res.result[0].dictList);
        });
    },
    geAcound() {
      //
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      funaccountCount(params)
        .then((res) => {
          console.log(res)
          this.funodAound = res.result
        })
        .finally(() => {
          
        });
    },
    search() {
      //搜索
      this.formInline.startTime = this.date[0];
      this.formInline.endTime = this.date[1];
      console.log(this.formInline);
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
        this.geAcound()
    },
    reset() {
      this.formInline = {};
      // this.formInline.fundFlow = ''
      // this.formInline.billType = ''
      this.date = [];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
      this.geAcound()
    },
    getList() {
      //
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      fundLog(params)
        .then((res) => {
          const { total, records } = res.result;
          //   records.forEach((item) => {
          //     if (item.fundFlow == 1) {
          //       item.receivedMoneytxt = "+" + item.receivedMoney;
          //       item.practicalReceivedMoneytxt = "+" + item.practicalReceivedMoney;
          //       item.outflowtxt = '-';
          //       item.actualoutflowtxt = '-'
          //     } else {
          //       item.outflowtxt = "-" + item.receivedMoney;
          //       item.actualoutflowtxt = "-" + item.practicalReceivedMoney;
          //       item.receivedMoneytxt = '-';
          //       item.practicalReceivedMoneytxt = '-'
          //     }
          //   });
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.result_box {
  color: #606266;
  margin-bottom: 14px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
